<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学生请假</title>

    <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
    <script src="./js/axios.min.js" type="text/javascript" charset="utf-8"></script>
    <style>
        body {
            background: #424f63;
            font-family: 'Open Sans', sans-serif;
            color: #7a7676;
            line-height: 20px;
            overflow-x: hidden;
            font-size: 18px;
        }
        #app{
            width: 800px;
            height: 600px;
            margin: auto;
        }
        table{
            border: 1px solid;
            text-align: center;

        }
        input {
            width: 580px;
            height: 40px;
        }
        textarea{
            width: 580px;

        }
    </style>
</head>
<body>
<div id="app">
    <form method="get">
        <table cellspacing="3px" cellpadding="3px">
            <tr><th colspan="2">学生请假条</th></tr>
            <tr>
                <td>姓名:</td>
                <td><input type="text"  v-model="Sname"/></td>
            </tr>
            <tr>
                <td>学号:</td>
                <td><input type="text" v-model="Sno"/></td>
            </tr>
            <tr>
                <td>时间:</td>
                <td><input type="datetime" v-model="time"/></td>
            </tr>
            <tr>
                <td>地点:</td>
                <td><input type="place" v-model="place"/></td>
            </tr>
            <tr>
                <td>原因:</td>
                <td><textarea rows="10" cols="60" v-model="reason"></textarea></td>
            </tr>
            <tr>
                <td colspan="2"><button type="button" @click="addLeave">提交</button></td>
            </tr>
        </table>
    </form>
</div>
<script type="text/javascript">
    new Vue({
        el:'#app',
        data:{
            Sname:'',
            Sno:'',
            time:'',
            reason:'',
            place: '',
            status: 0
        },
        methods:{
            addLeave(){
                axios
                    .get('/leave/add',{
                        params: {
                            Sname:this.Sname,
                            Sno:this.Sno,
                            time:this.time,
                            reason:this.reason,
                            place:this.place,
                            status:this.status
                        }
                    })
                    .then(res => {
                        if (res.data=='ok'){
                            alert("提交成功");
                        }else{
                            alert("提交失败");
                        }
                    })

            }
        }
    })
</script>


</body>
</html>